<script>
  import { writable } from "svelte/store";
  import { SvelteFlow, Background, Controls, MiniMap } from "@xyflow/svelte";
  import "@xyflow/svelte/dist/style.css";
  import MyCustomNode from "./MyCustomNode.svelte";

  const nodeTypes = {
    "my-custom-node": MyCustomNode,
  };

  const nodes = writable([
    {
      id: "A",
      type: "group",
      data: {},
      position: { x: 0, y: 0 },
      style: "width: 170px; height: 140px;",
    },
    {
      id: "B",
      type: "input",
      data: { label: "child 1" },
      position: { x: 10, y: 10 },
      parentId: "A",
      extent: "parent",
    },
    {
      id: "C",
      data: { label: "child 2" },
      position: { x: 10, y: 90 },
      parentId: "A",
      extent: "parent",
    },
  ]);
  // const edges = writable([{ id: "1-2", source: "1", target: "2" }]);
  const edges = writable([]);
</script>

<main>
  <div>
    <p>this is svelte</p>
  </div>
  <div style="width:50vw;height:50vh">
    <SvelteFlow {nodes} {edges} {nodeTypes} fitView>
      <!-- <MiniMap /> -->
      <Background bgColor="rgba(126,159,219,0.5)" patternColor="white" />
      <Controls />
    </SvelteFlow>
  </div>
</main>

<style>
</style>
